<template>
    <div class="block">
        <div @click="toggle" class="block-header" :class="`${data.block_name ? 'block' : 'layer'}`">
            {{ data.block_name ? `${data.block_name} (${filteredEntries.length})` : data.layer_name }}
        </div>
        <div v-if="isOpen" class="children">
            <div v-if="data.block_name">
                <div v-for="(entry, index) in filteredEntries" :key="index" class="entry-line">
                    <div class="line"></div>
                    <ModelBlockEntry :data="entry" />
                </div>
            </div>
            <div v-else>
                <ModelLayer :data="data" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import ModelBlockEntry from './ModelBlockEntry.vue';
import ModelLayer from './ModelLayer.vue';

const props = defineProps(['data']);
const filteredEntries = computed(() => props.data.block_entries.filter((entry) => entry.entry_name !== 'init_cfg'));
const entryCount = computed(() => {
    return (entry) => {
        if (entry.entry_value.block_name) {
            return entry.entry_value.block_entries.length;
        } else {
            return 0;
        }
    };
});

const isOpen = ref(false);
const toggle = () => {
    isOpen.value = !isOpen.value;
};
</script>

<style scoped>
.block {
    position: relative;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #ddd;
}

.block-header {
    background-color: #f0f0f0;
    margin: 2px;
    padding: 10px;
    cursor: pointer;
    color: black;
    border-left: 2px solid #5c5c5c;
    user-select: none;
}

.block-header.layer {
    border-left: 2px solid #c18907;
    background-color: #f9f5e8;
}

.children {
    position: relative;
    margin-left: 20px;
    border-left: 1px solid #ddd;
    padding-left: 15px;
}

.entry-line {
    display: flex;
    align-items: center;
    position: relative;
}

.line {
    position: absolute;
    width: 15px;
    border-bottom: 1px dashed #ddd;
    height: 20px;
    left: -15px;
    top: 45%;
    transform: translateY(-50%);
}
</style>
